<template>
    <div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">{{$t('目录.仪表盘')}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/panel/rank2' }">{{$t('目录.temu数据分析')}}</el-breadcrumb-item>
            <el-breadcrumb-item >{{$t('目录.热销商品')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="rank2-card">
            <div>
                <div class="rank2-card-title">{{$t('商品查询')}}</div>
                <el-divider></el-divider>
                <div >
                   <el-form :model="formData" label-width="10.58rem"  :inline="true" class="responsive-form">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-form-item :label="$t('关键词')">
                                <div style="display: flex;width: 100%;">
                                    <el-input v-model="formData.goods_name" :placeholder="$t('请输入关键词')" style="width: 100%;" />
<!--                                    <el-select v-model="formData.matchMode" style="width: 40%;">-->
<!--                                        <el-option :label="$t('严格匹配')" :value="1" />-->
<!--                                        <el-option :label="$t('模糊匹配')" :value="2" />-->
<!--                                    </el-select>-->
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('站点')">
                                <el-select v-model="formData.regionId" :placeholder="$t('请选择站点')" class="form-select">
                                    <el-option v-for="item in siteList" :key="item.regionId" :label="item.name" :value="item.regionId" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item :label="$t('品类')">
                                <el-cascader v-model="selectedValue" @change="handleChangeCate" @remove-tag="handleClearSelect"
                                :props="props" :placeholder="$t('请选择品类')" collapse-tags collapse-tags-tooltip :max-collapse-tags="5" filterable style="width: 100%;" />
                            </el-form-item>
                        </el-col>
<!--                        <el-col :span="8">-->
<!--                            <el-form-item :label="$t('总销量')">-->
<!--                                <div style="display: flex;width: 100%;">-->
<!--                                    <el-input type="number" v-model="formData.sale_count_min" :placeholder="$t('最低')" class="form-input" />-->
<!--                                    <el-input type="number" v-model="formData.sale_count_max" :placeholder="$t('最高')" class="form-input" />-->
<!--                                </div>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
                        <el-col :span="8">
                            <el-form-item :label="$t('日销量')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.sale_count_min" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.sale_count_max" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item :label="$t('周销量')">
                            <div style="display: flex;width: 100%;">
                              <el-input type="number" v-model="formData.weekSoldMin" :placeholder="$t('最低')" class="form-input" />
                              <el-input type="number" v-model="formData.weekSoldMax" :placeholder="$t('最高')" class="form-input" />
                            </div>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                          <el-form-item :label="$t('月销量')">
                            <div style="display: flex;width: 100%;">
                                <el-input type="number" v-model="formData.monthSoldMin" :placeholder="$t('最低')" class="form-input" />
                                <el-input type="number" v-model="formData.monthSoldMax" :placeholder="$t('最高')" class="form-input" />
                            </div>
                        </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item :label="$t('日销增长率')">
                            <div style="display: flex;width: 100%;">
                                <el-input type="number" v-model="formData.daySoldRateMin" :placeholder="$t('最低')" class="form-input" />
                                <el-input type="number" v-model="formData.daySoldRateMax" :placeholder="$t('最高')" class="form-input" />
                            </div>
                        </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item :label="$t('日销售额')">
                            <div style="display: flex;width: 100%;">
                              <el-input type="number" v-model="formData.daySalesMin" :placeholder="$t('最低')" class="form-input" />
                              <el-input type="number" v-model="formData.daySalesMax" :placeholder="$t('最高')" class="form-input" />
                            </div>
                          </el-form-item>
                      </el-col>
                    </el-row>
                   </el-form>
                </div>
                <div v-if="isOpening == false"></div>
                <div v-else>
                    <el-form :model="formData" label-width="10.58rem" :inline="true" class="responsive-form">
                        <el-row :gutter="20">
<!--                            <el-col :span="8">-->
<!--                                <el-form-item :label="$t('周销增长率')">-->
<!--                                    <div style="display: flex;width: 100%;">-->
<!--                                        <el-input type="number" v-model="formData.weekSoldRateMin" :placeholder="$t('最低')" class="form-input" />-->
<!--                                        <el-input type="number" v-model="formData.weekSoldRateMax" :placeholder="$t('最高')" class="form-input" />-->
<!--                                    </div>-->
<!--                                </el-form-item>-->
<!--                            </el-col>-->
<!--                            <el-col :span="8">-->
<!--                              <el-form-item :label="$t('月销增长率')">-->
<!--                                  <div style="display: flex;width: 100%;">-->
<!--                                      <el-input type="number" v-model="formData.monthSoldRateMin" :placeholder="$t('最低')" class="form-input" />-->
<!--                                      <el-input type="number" v-model="formData.monthSoldRateMin" :placeholder="$t('最高')" class="form-input" />-->
<!--                                  </div>-->
<!--                              </el-form-item>-->
<!--                            </el-col>-->
<!--                            <el-col :span="8">-->
<!--                              <el-form-item :label="$t('总销售额')">-->
<!--                                  <div style="display: flex;width: 100%;">-->
<!--                                      <el-input type="number" v-model="formData.salesMin" :placeholder="$t('最低')" class="form-input" />-->
<!--                                      <el-input type="number" v-model="formData.salesMax" :placeholder="$t('最高')" class="form-input" />-->
<!--                                  </div>-->
<!--                              </el-form-item>-->
<!--                            </el-col>-->
<!--                            <el-col :span="8">-->
                            <el-col :span="8">
                              <el-form-item :label="$t('周销售额')">
                                <div style="display: flex;width: 100%;">
                                  <el-input type="number" v-model="formData.weekSalesMin" :placeholder="$t('最低')" class="form-input" />
                                  <el-input type="number" v-model="formData.weekSalesMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item :label="$t('月销售额')">
                                <div style="display: flex;width: 100%;">
                                  <el-input type="number" v-model="formData.monthSalesMin" :placeholder="$t('最低')" class="form-input" />
                                  <el-input type="number" v-model="formData.monthSalesMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                              </el-form-item>
                            </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('评论数')">
                              <div style="display: flex;width: 100%;">
                                <el-input type="number" v-model="formData.reviewNumMin" :placeholder="$t('最低')" class="form-input" />
                                <el-input type="number" v-model="formData.reviewNumMax" :placeholder="$t('最高')" class="form-input" />
                              </div>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">

                            <el-col :span="8">
                              <el-form-item :label="$t('上架时间')">
                                <div style="display: flex;width: 100%;">
                                  <el-date-picker v-model="onSaleTimeRange1" type="daterange" unlink-panels style="width: 100%;" :disabled-date="disabledDate"
                                                  start-placeholder="Start Date" end-placeholder="End Date" @change="handleDateRangeChange" @visible-change="handleVisibleChange" @focus="handleFocus"/>
                                </div>
                              </el-form-item>
                            </el-col>
                            <el-col :span="8">
                              <el-form-item :label="$t('库存')">
                                <div style="display: flex;width: 100%;">
                                  <el-input type="number" v-model="formData.quantityMin" :placeholder="$t('最低')" class="form-input" />
                                  <el-input type="number" v-model="formData.quantityMax" :placeholder="$t('最高')" class="form-input" />
                                </div>
                              </el-form-item>
                            </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('价格')">
                              <div style="display: flex;width: 100%;">
                                <el-input type="number" v-model="formData.sale_price" :placeholder="$t('最低')" class="form-input" />
                                <el-input type="number" v-model="formData.retail_price" :placeholder="$t('最高')" class="form-input" />
                              </div>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="20">

                            <el-col :span="8">
                              <el-form-item :label="$t('Temu.评分')">
                                <div style="display: flex;width: 100%;">
                                    <el-input type="number" v-model="formData.score_min" :placeholder="$t('最低')" class="form-input" />
                                    <el-input type="number" v-model="formData.score_max" :placeholder="$t('最高')" class="form-input" />
                                </div>
                            </el-form-item>
                            </el-col>
                        </el-row>
<!--                        <el-row :gutter="20">-->
<!--                            <el-col :span="8">-->
<!--                              <el-form-item :label="$t('开店时间')">-->
<!--                                  <div style="display: flex;width: 100%;">-->
<!--                                      <el-date-picker v-model="onSaleTimeRange2" type="daterange" unlink-panels style="width: 100%;" :disabled-date="disabledDate"-->
<!--                                      start-placeholder="Start Date" end-placeholder="End Date" @change="handleDateRangeChange2" @visible-change="handleVisibleChange" @focus="handleFocus"/>-->
<!--                                  </div>-->
<!--                              </el-form-item>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row :gutter="20">-->
<!--                            <el-col :span="8">-->
<!--                                <el-form-item :label="$t('商品状态')">-->
<!--                                    <el-select v-model="formData.status" :placeholder="$t('请选择站点')" class="form-select">-->
<!--                                        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>-->
<!--                                    </el-select>-->
<!--                                </el-form-item>-->
<!--                            </el-col>-->
<!--                            <el-col :span="8"></el-col>-->
<!--                            <el-col :span="8"></el-col>-->
<!--                        </el-row>-->
                   </el-form>
                </div>
                <div v-if="isOpening == false" style="display: flex;width: 100%;justify-content: space-between;">
                    <el-button style="margin: 1rem 1rem 0 3%;color:rgb(0,82,217);display: flex;border: none;" @click="isOpen()">
                        <el-icon><ArrowDown /></el-icon>
                        <div style="margin: -0.3rem 0 0 0.5rem;">{{ $t('展开') }}</div>
                    </el-button>
                    <div style="display: flex;">
                        <el-button style="margin: 1rem 0 0 0;background-color:rgb(0,82,217);color: #fff;display: flex;
                        height: 2.5rem;width: 6.25rem;" @click="btnSearchProducts">
                        <el-icon><Search /></el-icon>
                        <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('Temu.搜索') }}</div>
                        </el-button>
                        <el-button style="margin: 1rem 0 0 2rem;background-color:#E8E9ED;color: #101010;height: 2.5rem;
                        width: 6.25rem;" @click="clearForm">
                            <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('清除') }}</div>
                        </el-button>
                    </div>
                </div>
                <div v-else style="display: flex;width: 100%;justify-content: space-between;">
                    <el-button style="margin: 1rem 1rem 0 3%;color:rgb(0,82,217);display: flex;border: none;" @click="isOpen()">
                        <el-icon><ArrowUp /></el-icon>
                        <div style="margin: -0.1rem 0 0 0.5rem;">{{ $t('收起') }}</div>
                    </el-button>
                    <div style="display: flex;">
                        <el-button style="margin: 1rem 0 0 0;background-color:rgb(0,82,217);color: #fff;display: flex;
                        height: 2.5rem;width: 6.25rem;" @click="btnSearchProducts">
                        <el-icon><Search /></el-icon>
                        <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('Temu.搜索') }}</div>
                        </el-button>
                        <el-button style="margin: 1rem 0 0 2rem;background-color:#E8E9ED;color: #101010;height: 2.5rem;
                        width: 6.25rem;" @click="clearForm">
                            <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('清除') }}</div>
                        </el-button>
                    </div>
                </div>
                <el-divider></el-divider>
            </div>
            <div>
              <div class="rank2-card-title">
                {{$t('搜索结果')}}
                <span style="color:#999;font-size: 0.8rem">({{ total }}{{ $t('共') }})</span>
              </div>
              <!--未登录-->
              <div v-if="!isLogin">
                <div style="margin-top: 1.3rem;position: relative">
                  <!-- table height="1240"  -->
                  <el-table :data="sortedProductList" style="width: 100%" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px','text-align':'center'}"
                            :cell-style="{'text-align':'center'}" :row-style="{height:'70px'}" v-loading="!isSuccess" @sort-change="handleSortChange" :header-cell-class-name="getHeaderCellClassName"
                            :default-sort="{ prop: sort, order:order }" height="800"  element-loading-text="Loading..." ref="table">
                    <el-table-column prop="products" :label="this.$t('表格.商品')" width="380" fixed>
                      <template #default="scope">
                        <div style="display: flex;">
                          <div style="cursor: pointer;">
                            <img :src="scope.row.goods_img" style="width: 5rem;height: 5rem;"/>
                          </div>
                          <div class="goodsName" @click="shiftDetailTemu(scope.row.goods_id,this.formData.regionId,scope.row.platform)">
                            <!-- <span class="product-tag" >{{scope.row.catItems[3].catName}}</span> -->
                            <span class="showOverTooltip" style="font-size: 14px">{{ scope.row.goods_name }}</span>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="sale_price" :label="this.$t('价格')" sortable="custom" width="140">
                      <template #default="scope">
                        <div style="color: #ff5c00;font-size: 14px">
                          <div v-if="scope.row.sale_price_symbol == null || scope.row.sale_price_symbol == '' || scope.row.sale_price == '0.00'||scope.row.sale_price == '0' ">
                            <span>{{ scope.row.retail_price_symbol }}</span>
                          </div>
                          <div v-else-if="scope.row.retail_price_symbol == null || scope.row.retail_price_symbol == '' || scope.row.retail_price == '0' ||scope.row.retail_price == '0.00'">
                            <span>{{ scope.row.sale_price_symbol }}</span>
                          </div>
                          <div v-else>
                            <div v-if="scope.row.sale_price < scope.row.retail_price">
                              <span>{{ scope.row.sale_price_symbol }} - {{ scope.row.retail_price_symbol }}</span>
                            </div>
                            <div v-else-if="scope.row.sale_price > scope.row.retail_price">
                              <span>{{ scope.row.retail_price_symbol }} - {{ scope.row.sale_price_symbol }}</span>
                            </div>
                            <div v-else-if="scope.row.retail_price == scope.row.sale_price && scope.row.retail_price_symbol == scope.row.sale_price_symbol">
                              <span>{{ scope.row.sale_price_symbol }}</span>
                            </div>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column :label="this.$t('表格.销量')">
                      <el-table-column prop="sale_count" :label="this.$t('表格.日')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.sale_count == null">
                            -
                          </div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.sale_count}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="week_sale_count" :label="this.$t('表格.周')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.week_sale_count == null">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.week_sale_count}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="month_sale_count" :label="this.$t('表格.月')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.month_sale_count == null">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.month_sale_count}}
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="growth_rate" :label="this.$t('增长率')" sortable="custom" width="145">
                      <template #default="scope">
                        <div style="display: flex;justify-content: center; align-items: center;font-size: 14px;">
                          <!-- 上涨 scope.row.growth_rate[0] !=='-'&& scope.row.growth_rate !=='/'-->
                          <div v-if="scope.row.growth_rate>0 && scope.row.growth_rate !=='/'" style="height: 5rem;line-height: 5rem;">
                            <img style="margin-top: 0.6rem;" src="../assets/img/icon/arrowup1.svg"/>
                            <span style="margin-left: 0.3rem;color:#F53F3F">{{ scope.row.growth_rate }}%</span>
                          </div>
                          <!--下跌 v-else-if="scope.row.growth_rate[0] =='-'"-->
                          <div v-else-if="scope.row.growth_rate<0" style="height: 5rem;line-height: 5rem;">
                            <img style="margin-top: 0.6rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                            <span style="margin-left: 0.3rem;color:#58A55C">{{ scope.row.growth_rate }}%</span>
                          </div>
                          <!-- 无数据 -->
                          <div v-else style="height: 5rem;line-height: 5rem;"><span>{{ scope.row.growth_rate }}%</span></div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column :label="this.$t('表格.销售额')">
                      <el-table-column prop="revenue" :label="this.$t('表格.日')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.revenue == null ">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.revenue}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="week_revenue" :label="this.$t('表格.周')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.week_revenue == null">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.week_revenue}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="month_revenue" :label="this.$t('表格.月')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.month_revenue == null">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.month_revenue}}
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="shelf_time" :label="this.$t('表格.上架时间')" sortable="custom" width="120">
                      <template #default="scope">
                        <div v-if="scope.row.shelf_time == '' || scope.row.shelf_time == null"> - </div>
                        <div v-else style="font-size: 14px">{{ scope.row.shelf_time.slice(0,10) }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="inventory" :label="this.$t('表格.库存')" sortable="custom" width="110">
                      <template #default="scope">
                        <div v-if="scope.row.inventory == '' || scope.row.inventory == null"> - </div>
                        <div v-else style="font-size: 14px">
                          {{ parseInt(scope.row.inventory)}}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="star_comment" :label="this.$t('表格.商品评分')" sortable="custom">
                      <template #default="scope">
                        <div v-if="scope.row.star_comment == '' || scope.row.star_comment == null"> - </div>
                        <div v-else style="font-size: 14px">
                          {{ scope.row.star_comment}}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="review_count" :label="this.$t('表格.评论数')" sortable="custom" width="130">
                      <template #default="scope">
                        <div v-if="scope.row.review_count == '' || scope.row.review_count == null"> - </div>
                        <div v-else style="font-size: 14px">
                          {{ parseInt(scope.row.review_count)}}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 未登录 只显示五条 遮罩层-->
                  <div v-show="isSuccess && !isLogin"  class="mask-layer">
                    <div class="can-not-show2" style="width: 100%">{{ $t('遮罩.去登录') }}</div>
                    <div style="margin-top: 1rem;margin-bottom: 3rem;width: 100%;display: flex;justify-content: center;">
                      <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;border: none !important;" @click="shiftRegister()">{{ $t('按钮.注册') }}</el-button>
                    </div>
                  </div>
                </div>
              </div>
              <!--登录-->
              <div v-else>
                <div v-if="isVip" style="margin-top: 1.3rem;position: relative">
                  <!-- table height="1240"  -->
                  <el-table :data="sortedProductList" style="width: 100%" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px','text-align':'center'}"
                            :cell-style="{'text-align':'center'}" :row-style="{height:'70px'}" @sort-change="handleSortChange" :header-cell-class-name="getHeaderCellClassName"
                            :default-sort="{ prop: sort, order:order }" height="800" v-loading="!isSuccess" element-loading-text="Loading..." ref="table">
                    <el-table-column prop="products" :label="this.$t('表格.商品')" width="380" fixed>
                      <template #default="scope">
                        <div style="display: flex;">
                          <div style="cursor: pointer;">
                            <img :src="scope.row.goods_img" style="width: 5rem;height: 5rem;"/>
                          </div>
                          <div class="goodsName" @click="shiftDetailTemu(scope.row.goods_id,this.formData.regionId,scope.row.platform)">
                            <!-- <span class="product-tag" >{{scope.row.catItems[3].catName}}</span> -->
                            <span class="showOverTooltip" style="font-size: 14px">{{ scope.row.goods_name }}</span>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="sale_price" :label="this.$t('价格')" sortable="custom" width="140">
                      <template #default="scope">
                        <div style="color: #ff5c00;font-size: 14px">
                          <div v-if="scope.row.sale_price_symbol == null || scope.row.sale_price_symbol == '' || scope.row.sale_price == '0.00'||scope.row.sale_price == '0' ">
                            <span>{{ scope.row.retail_price_symbol }}</span>
                          </div>
                          <div v-else-if="scope.row.retail_price_symbol == null || scope.row.retail_price_symbol == '' || scope.row.retail_price == '0' ||scope.row.retail_price == '0.00'">
                            <span>{{ scope.row.sale_price_symbol }}</span>
                          </div>
                          <div v-else>
                            <div v-if="scope.row.sale_price < scope.row.retail_price">
                              <span>{{ scope.row.sale_price_symbol }} - {{ scope.row.retail_price_symbol }}</span>
                            </div>
                            <div v-else-if="scope.row.sale_price > scope.row.retail_price">
                              <span>{{ scope.row.retail_price_symbol }} - {{ scope.row.sale_price_symbol }}</span>
                            </div>
                            <div v-else-if="scope.row.retail_price == scope.row.sale_price && scope.row.retail_price_symbol == scope.row.sale_price_symbol">
                              <span>{{ scope.row.sale_price_symbol }}</span>
                            </div>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column :label="this.$t('表格.销量')">
                      <el-table-column prop="sale_count" :label="this.$t('表格.日')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.sale_count == null">
                            -
                          </div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.sale_count}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="week_sale_count" :label="this.$t('表格.周')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.week_sale_count == null">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.week_sale_count}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="month_sale_count" :label="this.$t('表格.月')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.month_sale_count == null">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.month_sale_count}}
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="growth_rate" :label="this.$t('增长率')" sortable="custom" width="145">
                      <template #default="scope">
                        <div style="display: flex;justify-content: center; align-items: center;font-size: 14px;">
                          <!-- 上涨 scope.row.growth_rate[0] !=='-'&& scope.row.growth_rate !=='/'-->
                          <div v-if="scope.row.growth_rate>0 && scope.row.growth_rate !=='/'" style="height: 5rem;line-height: 5rem;">
                            <img style="margin-top: 0.6rem;" src="../assets/img/icon/arrowup1.svg"/>
                            <span style="margin-left: 0.3rem;color:#F53F3F">{{ scope.row.growth_rate }}%</span>
                          </div>
                          <!--下跌 v-else-if="scope.row.growth_rate[0] =='-'"-->
                          <div v-else-if="scope.row.growth_rate<0" style="height: 5rem;line-height: 5rem;">
                            <img style="margin-top: 0.6rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                            <span style="margin-left: 0.3rem;color:#58A55C">{{ scope.row.growth_rate }}%</span>
                          </div>
                          <!-- 无数据 -->
                          <div v-else style="height: 5rem;line-height: 5rem;"><span>{{ scope.row.growth_rate }}%</span></div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column :label="this.$t('表格.销售额')">
                      <el-table-column prop="revenue" :label="this.$t('表格.日')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.revenue == null ">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.revenue}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="week_revenue" :label="this.$t('表格.周')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.week_revenue == null">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.week_revenue}}
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="month_revenue" :label="this.$t('表格.月')" sortable="custom" width="120">
                        <template #default="scope">
                          <div style="font-size: 14px" v-if="scope.row.month_revenue == null">-</div>
                          <div v-else style="font-size: 14px">
                            {{scope.row.month_revenue}}
                          </div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column prop="shelf_time" :label="this.$t('表格.上架时间')" sortable="custom" width="120">
                      <template #default="scope">
                        <div v-if="scope.row.shelf_time == '' || scope.row.shelf_time == null"> - </div>
                        <div v-else style="font-size: 14px">{{ scope.row.shelf_time.slice(0,10) }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="inventory" :label="this.$t('表格.库存')" sortable="custom" width="110">
                      <template #default="scope">
                        <div v-if="scope.row.inventory == '' || scope.row.inventory == null"> - </div>
                        <div v-else style="font-size: 14px">
                          {{ parseInt(scope.row.inventory)}}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="star_comment" :label="this.$t('表格.商品评分')" sortable="custom">
                      <template #default="scope">
                        <div v-if="scope.row.star_comment == '' || scope.row.star_comment == null"> - </div>
                        <div v-else style="font-size: 14px">
                          {{ scope.row.star_comment}}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="review_count" :label="this.$t('表格.评论数')" sortable="custom" width="130">
                      <template #default="scope">
                        <div v-if="scope.row.review_count == '' || scope.row.review_count == null"> - </div>
                        <div v-else style="font-size: 14px">
                          {{ parseInt(scope.row.review_count)}}
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
                <!--  登录且不是vip时显示 -->
                <div v-show="!isVip && isSuccess && isLogin"  style="margin:0 10%;">
                  <div class="can-not-show" style="width: 100%">{{ $t('没开vip') }}</div>
                  <div style="margin-top: 1rem;margin-bottom: 3rem;width: 100%;display: flex;justify-content: center;">
                    <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                  </div>
                </div>
            </div>
            <div v-show="isSuccess && isVip && isLogin" class="pagination-container">
                    <el-pagination v-model:current-page="formData.page" v-model:page-size="formData.size" :page-sizes="[10,20,50,100]"
                    :size="size" :disabled="disabled" :background="background" layout="sizes, prev, pager, next, jumper"
                    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" hide-on-single-page/>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import cloneDeep from 'lodash/cloneDeep'; // 引入 lodash 的 cloneDeep 方法
// import TableCell from '../components/TableCell.vue'; // 引入 getDetails getCates searchGoods
import {getSites,} from '../apis/gb'
import {getUser} from '../apis/user'
import {getMergeCates,getMergeProducts} from '../apis/merge'
// import {getCountries} from '../apis/rank'
import { ElMessage } from 'element-plus';
import {buttonClick} from "@/util/buttonClick";
    // let mapIsLeaf = {};
    export default{
        name: 'MyComponent',
        components: {
            // TableCell // 注册
        },
        data(){
            return{
                isSuccess:false,
                isVip:false,
                symbol:"$",
                // mapIsLeaf:{},
                parentCatId:0,
                cateList:[],
                selectedValues:[],  // 用于存储选中的值
                selectedValue: [], // 单选时使用单一值
                // eslint-disable-next-line no-unused-vars
                props:{
                  multiple: false ,
                  lazy:true,
                  checkStrictly: true,
                  async lazyLoad(node, resolve) {
                    const {value = 0} = node;
                    getMergeCates(value).then((res)=>{
                      // this.catId = res.data[0].id
                      if(Array.isArray(res.data)){
                        this.cateList = res.data
                        //ES新特征 深拷贝
                        const formattedData = res.data.map(item => {
                          const newItem = {
                            value: item.id,
                            label: item.name,
                            children: item.is_leaf ? [] : undefined, // 如果 isLeaf 为 false，则允许有子节点
                            leaf: item.is_leaf,
                          };
                          // mapIsLeaf['id_'+item.catId] = item.isLeaf;
                          return newItem;
                        });
                        resolve(formattedData);
                      }

                    })
                  }},
                siteList:[],
                statusList:[
                    {
                        value:0,
                        label: this.$t('不限'),
                    },
                    {
                        value:1,
                        label: this.$t('正常'),
                    },
                    {
                        value:2,
                        label: this.$t('缺货'),
                    },
                    {
                        value:3,
                        label: this.$t('下架'),
                    },
                ],
                onSaleTimeRange1: [],
                onSaleTimeRange2: [],
                formData:{
                  page:1,
                  size:10,
                  // 新接口参数
                  regionId:null,
                  // country:'fr', //fr
                  cat_id:'',
                  goods_name:null,
                  sale_price:null,
                  retail_price:null,
                  sale_count_min:null,
                  sale_count_max:null,
                  score_min:null,
                  score_max:null,
                  shelf_time_min:null,
                  shelf_time_max:null,
                  sort:'growth_rate',//增长率
                  order:'descending',

                  weekSoldMin:null,
                  weekSoldMax:null,
                  monthSoldMin:null,
                  monthSoldMax:null,
                  daySoldRateMin:null,
                  daySoldRateMax:null,
                  daySalesMin:null,
                  daySalesMax:null,
                  weekSalesMin:null,
                  weekSalesMax:null,
                  monthSalesMin:null,
                  monthSalesMax:null,
                  reviewNumMin:null,
                  reviewNumMax:null,
                  onSaleTimeRange1:null,
                  quantityMin:null,
                  quantityMax:null,
                },
                catId:'',
                templateFormData:{
                  page:1,
                  size:10,
                  // 新接口参数
                  regionId:null,
                  // country:'fr', //fr
                  cat_id:'',
                  goods_name:null,
                  sale_price:null,
                  retail_price:null,
                  sale_count_min:null,
                  sale_count_max:null,
                  score_min:null,
                  score_max:null,
                  shelf_time_min:null,
                  shelf_time_max:null,
                  sort:'growth_rate',//增长率
                  order:'descending',

                  weekSoldMin:null,
                  weekSoldMax:null,
                  monthSoldMin:null,
                  monthSoldMax:null,
                  daySoldRateMin:null,
                  daySoldRateMax:null,
                  daySalesMin:null,
                  daySalesMax:null,
                  weekSalesMin:null,
                  weekSalesMax:null,
                  monthSalesMin:null,
                  monthSalesMax:null,
                  reviewNumMin:null,
                  reviewNumMax:null,
                  onSaleTimeRange1:null,
                  quantityMin:null,
                  quantityMax:null,
                },
                isOpening:false,
                total:null,
                currentPage:1,
                pageSize:10,
                size:'default',
                background:true,
                disabled:false,
                myChart:null,
                tableData:[],
                sortBy: '',
                sortOrders: {},
                reTry:3,
                history:[],
                sort:'growth_rate',//增长率
                order:'descending',
                orderParams:'',
                // url接收的国家参数
                country:'',
                countryCodes:{
                  '210':'uk',
                  '212':'eur',//欧盟 ？  211全部
                  '76':'de',//德国
                  '69':'fr',
                  '98':'it',//意大利
                  '163':'pt',//葡萄牙
                  '186':'es',//西班牙
                  // 国家代码和对应站点id...
                },
                countryCodes1:{
                  UK:210,
                  EUR:'212',//欧盟 ？  211全部
                  DE:'76',//德国
                  FR:'69',
                  IT:'98',//意大利
                  PT:'163',//葡萄牙
                  ES:'186',//西班牙
                  // 国家代码和对应站点id...
                },
                userInfo:{
                  "name": "",
                  "invite_code": "",
                  "email": "",
                  "subscription": "",
                  "expired_at": "",
                  "is_active": false,
                  "register_date":''
                },
                options:[
                  {
                    value: 'id',
                    label: '1',
                    children: [
                      {
                        value: 'disciplines',
                        label: 'Disciplines',
                        children: [
                          {
                            value: 'consistency',
                            label: 'Consistency',
                          },
                          {
                            value: 'feedback',
                            label: 'Feedback',
                          },
                          {
                            value: 'efficiency',
                            label: 'Efficiency',
                          },
                          {
                            value: 'controllability',
                            label: 'Controllability',
                          },
                        ],
                      },
                      {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [
                          {
                            value: 'side nav',
                            label: 'Side Navigation',
                          },
                          {
                            value: 'top nav',
                            label: 'Top Navigation',
                          },
                        ],
                      },
                    ],
                  },
                  {
                    value: 'component',
                    label: 'Component',
                    children: [
                      {
                        value: 'basic',
                        label: 'Basic',
                        children: [
                          {
                            value: 'layout',
                            label: 'Layout',
                          },
                          {
                            value: 'color',
                            label: 'Color',
                          },
                          {
                            value: 'typography',
                            label: 'Typography',
                          },
                          {
                            value: 'icon',
                            label: 'Icon',
                          },
                          {
                            value: 'button',
                            label: 'Button',
                          },
                        ],
                      },
                      {
                        value: 'form',
                        label: 'Form',
                        children: [
                          {
                            value: 'radio',
                            label: 'Radio',
                          },
                          {
                            value: '2261',
                            label: 'Checkbox',
                          },
                          {
                            value: 'input',
                            label: 'Input',
                          },
                          {
                            value: 'input-number',
                            label: 'InputNumber',
                          },
                          {
                            value: 'select',
                            label: 'Select',
                          },
                          {
                            value: 'cascader',
                            label: 'Cascader',
                          },
                          {
                            value: 'switch',
                            label: 'Switch',
                          },
                          {
                            value: 'slider',
                            label: 'Slider',
                          },
                          {
                            value: 'time-picker',
                            label: 'TimePicker',
                          },
                          {
                            value: 'date-picker',
                            label: 'DatePicker',
                          },
                          {
                            value: 'datetime-picker',
                            label: 'DateTimePicker',
                          },
                          {
                            value: 'upload',
                            label: 'Upload',
                          },
                          {
                            value: 'rate',
                            label: 'Rate',
                          },
                          {
                            value: 'form',
                            label: 'Form',
                          },
                        ],
                      },
                      {
                        value: 'data',
                        label: 'Data',
                        children: [
                          {
                            value: 'table',
                            label: 'Table',
                          },
                          {
                            value: 'tag',
                            label: 'Tag',
                          },
                          {
                            value: 'progress',
                            label: 'Progress',
                          },
                          {
                            value: 'tree',
                            label: 'Tree',
                          },
                          {
                            value: 'pagination',
                            label: 'Pagination',
                          },
                          {
                            value: 'badge',
                            label: 'Badge',
                          },
                        ],
                      },
                      {
                        value: 'notice',
                        label: 'Notice',
                        children: [
                          {
                            value: 'alert',
                            label: 'Alert',
                          },
                          {
                            value: 'loading',
                            label: 'Loading',
                          },
                          {
                            value: 'message',
                            label: 'Message',
                          },
                          {
                            value: 'message-box',
                            label: 'MessageBox',
                          },
                          {
                            value: 'notification',
                            label: 'Notification',
                          },
                        ],
                      },
                      {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [
                          {
                            value: 'menu',
                            label: 'Menu',
                          },
                          {
                            value: 'tabs',
                            label: 'Tabs',
                          },
                          {
                            value: 'breadcrumb',
                            label: 'Breadcrumb',
                          },
                          {
                            value: 'dropdown',
                            label: 'Dropdown',
                          },
                          {
                            value: 'steps',
                            label: 'Steps',
                          },
                        ],
                      },
                      {
                        value: 'others',
                        label: 'Others',
                        children: [
                          {
                            value: 'dialog',
                            label: 'Dialog',
                          },
                          {
                            value: 'tooltip',
                            label: 'Tooltip',
                          },
                          {
                            value: 'popover',
                            label: 'Popover',
                          },
                          {
                            value: 'card',
                            label: 'Card',
                          },
                          {
                            value: 'carousel',
                            label: 'Carousel',
                          },
                          {
                            value: 'collapse',
                            label: 'Collapse',
                          },
                        ],
                      },
                    ],
                  },
                ],
                // 默认的 三级分类id
                thirdLevelCateId:null,
                searchParams:{},
                isLogin:false,
            }
        },
        watch: {
          'formData.regionId': function(newVal) {
            this.templateFormData.regionId = newVal;
          }
        },
        mounted(){
            // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
            this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
            this.getSiteList()
            // this.getCountryList()
            // this.searchProducts()
            setTimeout(()=>{
              this.drawLineChart()//宏任务
            },0);
          try {
            // 获取并解析存储在 localStorage 中的 myinfo 数据
            const jsonString = localStorage.getItem('myinfo');
            // 检查 jsonString 是否存在且不是空字符串
            if (jsonString) {
              const a = JSON.parse(jsonString);
              // 明确地检查 is_active 是否为 true
              if (a && typeof a.is_active === 'boolean' && a.is_active) {
                this.isVip = true;
              } else {
                this.isVip = false;
              }
            } else {
              this.getUserInfo()
              // this.isVip = this.userInfo.is_active;
            }


          } catch (error) {
            // console.error('Error parsing "myinfo" from localStorage:', error);
            // this.isVip = false;
          }

        },
        created() {
            // this.getCateList()
            // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
            const search = localStorage.getItem('searchParams1')
            const cateList = localStorage.getItem('cateList1')
            // 取token 判断是否是登录状态
            const token = localStorage.getItem('token')
            this.isLogin = !!token;
            if(cateList){
              // 去除可能存在的多余空格并检查是否包含逗号
              const trimmedStr = cateList.trim();
              if (trimmedStr.includes(',')) {
                // 如果包含逗号，则按逗号分割并转换为数字数组
                this.selectedValue = trimmedStr.split(',').map(Number);
              } else {
                // 如果不包含逗号，则整个字符串作为一个数字元素放入数组
                this.selectedValue = [parseInt(trimmedStr, 10)];
              }
            }
            if(search){
              try {
                // 尝试解析 JSON 字符串为对象
                const searchdata = JSON.parse(search);
                // 检查是否包含多个对象（假设是一个数组）
                if (Array.isArray(searchdata)) {
                  this.searchParams = searchdata.map(item => ({ ...item }));
                }else if (typeof searchdata === 'object' && searchdata !== null) {
                  // 如果是单个对象，直接赋值
                  this.searchParams = { ...searchdata };
                  this.mapSearchParamsToFormData(this.searchParams)
                  // 根据缓存搜索商品
                  this.localSearchProducts()
                }else {
                  console.error('Invalid data format in localStorage');
                  const defaultSite = this.siteList.find(site => site.regionId === 211);
                  if (defaultSite) {
                    this.formData.regionId = defaultSite.regionId;
                  }
                  this.setDefaultCategory();
                }
              } catch (error) {
                console.error('Failed to parse searchParams from localStorage:', error);
                this.setDefaultCategory();
              }
            }else{
              this.setDefaultCategory();
            }
            // 从URL取数据
            // if(this.$route.query.id){
            //   this.selectedValue = [parseInt(this.$route.query.id)];
            // }else{
            //   // 初始化默认选择
            //   this.setDefaultCategory();
            // }
            // this.country = this.$route.query.country;
        },
        computed: {
          sortedProductList() {
            let sortedList = [...this.tableData];
            if (this.sort && this.order) {
              sortedList.sort((a, b) => {
                if (this.order === 'ascending') {
                  return a[this.sort] - b[this.sort];
                } else {
                  return b[this.sort] - a[this.sort];
                }
              });
            }
            if(!this.isLogin){
              // 未登录状态 只显示前5条数据
              sortedList = sortedList.slice(0,5)
            }
            return sortedList;
          },

          // 计算属性：根据 RecentlyCountry_code 获取国家全称
          // countryName(){
          //   return this.countryCodes[this.formData.country] || 'Unknown';
          // }
        },
      methods:{
            // 获取用户信息
            getUserInfo(){
              getUser().then((res)=>{
                if(res.code == 200 && res.status == 1){
                  console.log(res)
                  this.userInfo = res.data
                  localStorage.setItem('myinfo',JSON.stringify(this.userInfo))
                  this.isVip = this.userInfo.is_active;
                }
              })
            },
            getSiteList(){
                getSites().then((res)=>{
                    // 成功
                    if(res.code == 200 && res.status == 1){
                        this.siteList = this.siteList.concat(res.data.lists)

                      // 添加指定的数据对象到 siteList 的末尾
                      // const additionalSite = { id: 50, regionId: 212, name: "European Union", cnName: "欧盟" };
                      // this.siteList.push(additionalSite);

                        // if(!this.country){
                        //   this.formData.regionId = 69
                        // }else {
                        //   this.formData.regionId = parseInt((this.countryCodes1[this.country])) || 69; // 默认值为 69
                        // }
                        // console.log(2222222222,this.siteList)
                        // const defaultSite = this.siteList.find(site => site.regionId === 69);
                        // if (defaultSite) {
                        //   this.formData.regionId = defaultSite.regionId;
                        // }
                      // this.formData.regionId = 210;
                    }
                })
            },
            // 获取国家列表
            // getCountryList(){
            //   getCountries().then((res)=>{
            //     // 读缓存 没有的时候默认第一个
            //     if(res.code == 200 && res.status ==1)
            //     {
            //       this.siteList = this.siteList.concat(res.data)
            //       console.log(this.siteList)
            //     }
            //   })
            // },
            //获取分类
            async getCateList(){
              try {
                const res = await getMergeCates(this.parentCatId);
                if (res.code === 200 && res.status === 1) {
                  this.cateList = res.data;
                  // await this.searchProducts()
                } else {
                  console.warn('Failed to obtain the classification list:', res);
                }
              } catch (error) {
                console.error('An error occurred while requesting the classification list:', error);
              }
            },
            // 设置默认分类
            setDefaultCategory() {
              // 获取所有顶级分类
              getMergeCates(0).then(async (res) => {
                if (res.code === 200 && res.status === 1) {
                  const topLevelCategories = res.data;
                  if (topLevelCategories.length >= 6) {
                    const subLevelCategoryPid = topLevelCategories[5].id;
                    this.selectedValue =[subLevelCategoryPid]
                    // // 加载第二级分类
                    // const subcategoriesRes = await getMergeCates(subLevelCategoryPid);
                    // if (subcategoriesRes.code === 200 && subcategoriesRes.status === 1) {
                    //   const subcategories = subcategoriesRes.data;
                    //   if (subcategories.length > 0) {
                    //     const thirdLevelCategoryPid = subcategories[subcategories.length-1].id;
                    //     // 加载第三级分类
                    //     const thirdCategoresRes = await getMergeCates(thirdLevelCategoryPid);
                    //     if(thirdCategoresRes.code === 200 && thirdCategoresRes.status === 1){
                    //       const thirdCategories = thirdCategoresRes.data;
                    //       if(thirdCategories.length > 0) {
                    //         const thirdLevelCategoryId = thirdCategories[2].id;
                    //         // 设置默认选中的分类
                    //         this.selectedValue = [subLevelCategoryPid,thirdLevelCategoryPid,thirdLevelCategoryId];
                    //         // 触发搜索
                    //         this.thirdLevelCateId = thirdLevelCategoryId
                    //         // this.formData.cat_id = thirdLevelCategoryId;
                    //       }
                    //     }
                    //   }
                    // }
                  }
                }
                if(this.selectedValue){
                  this.searchProducts();
                }
              }).catch(error => {
                console.error('Error setting default category:', error);
              });
            },
            handleChangeCate(value) {
              console.log('Selected:', value);
              // this.formData.page = 1
            },
            // handleChangeCate(value){
            //     console.log('Selected:', value);
            //     // 当用户选择时，获取最后一级的分类 ID 并加载其子节点
            //     if (value.length > 0) {
            //         this.formData.catIds = value
            //         const a =value[value.length - 1]
            //         console.log(a)
            //         this.parentCatId = a[0];
            //         this.getCateList();
            //     } else {
            //         // 如果没有选择，则重置父分类 ID
            //         this.parentCatId = null;
            //     }
            // },
            // handleExpandChange(value){
            //     console.log('Selected11111:', value);
            // },
            async searchProducts(){
              try{
                for(let key in this.formData){
                  if(this.formData[key] == ""){
                    this.formData[key] =null
                  }
                }
                this.formData.cat_id= null
                if(this.selectedValue.length > 0){
                  if(this.thirdLevelCategoryId){
                    this.formData.cat_id = this.thirdLevelCategoryId
                  }else{
                    const n = this.selectedValue.length
                    this.formData.cat_id = this.selectedValue[n-1]
                  }
                }else{
                  this.formData.cat_id = this.cateList[5].id
                  this.selectedValue[0] = this.cateList[5].id
                }

                  if(this.formData.regionId == null){
                    if(!this.country){
                      this.formData.regionId = 211
                    }else {
                      this.formData.regionId = this.countryCodes1[this.country] || 211; // 默认值为 69
                    }
                  }else{
                    this.templateFormData.regionId = this.formData.regionId
                  }
                // console.log(this.selectedValues)
                // 根据 selectedValues 构建 cat_id
                // if (this.selectedValues.length > 0) {
                //   this.formData.cat_id = this.selectedValues.map(item => item[item.length - 1]).join(',');
                // } else {
                //   // this.formData.cat_id = this.cateList[0]?.id || null;
                //   // this.formData.cat_id = '26288'
                //   console.log(11111111111111,this.cateList);
                // }
                this.isSuccess = false
                if(this.order == 'ascending'){
                  this.orderParams = 'asc';
                }else if(this.order == 'descending')
                {
                  this.orderParams = 'desc';
                }
                this.searchParams = {
                  region_id:this.formData.regionId,
                  cat_id:this.formData.cat_id,
                  goods_name:this.formData.goods_name,
                  sale_price:this.formData.sale_price,
                  retail_price:this.formData.retail_price,
                  sale_count_min:this.formData.sale_count_min,
                  sale_count_max:this.formData.sale_count_max,
                  score_min:this.formData.score_min,
                  score_max:this.formData.score_max,
                  shelf_time_min:this.formData.shelf_time_min,
                  shelf_time_max:this.formData.shelf_time_max,
                  page: this.formData.page,
                  size: this.formData.size,
                  sort:this.sort,
                  order:this.orderParams,
                }
                // 参数 搜索  country:this.formData.country,
                const res = await getMergeProducts(this.searchParams);
                this.total =0
                this.tableData = []
                if(res.code == 200 && res.status == 1){
                  this.total = res.data.total
                  this.tableData = res.data.lists
                  this.isSuccess=true
                  this.siteList.forEach((item,index)=>{
                    if(item.regionId === this.formData.regionId){
                      this.symbol = this.siteList[index].symbol
                      localStorage.setItem("symbol",this.symbol)
                    }
                  })
                  // 把搜索的参数存一下
                  localStorage.setItem("searchParams1",JSON.stringify(this.searchParams))
                  // 把选中的分类数组存一下
                  localStorage.setItem("cateList1",this.selectedValue)
                }else {
                  throw new Error('Server returned an unsuccessful response');
                }
              }catch (error) {
                // this.handleError(error);
                this.isSuccess = true;
              } finally {
                // this.loading = false;
              }
            },
            // 方法用于将 searchParams 的值赋值给 formData
            mapSearchParamsToFormData(a) {
              this.formData = { ...a}
              if(!a.region_id){
                this.formData.regionId = 211// 默认值为 69
              }else {
                if (this.siteList) {
                  const self = this; // 保存当前的上下文
                  // 延迟显示 防止先出数字
                  setTimeout(function (){
                    self.formData.regionId = a.region_id;
                  },1500)
                }
              }
              // console.log(1111111111,this.formData)
            },
            // 单纯根据缓存的参数进行搜索
            localSearchProducts(){
              getMergeProducts(this.searchParams).then((res)=>{
                this.total =0
                this.tableData = []
                if(res.code == 200 && res.status == 1){
                  this.total = res.data.total
                  this.tableData = res.data.lists
                  this.isSuccess=true
                  this.siteList.forEach((item,index)=>{
                    if(item.regionId === this.formData.regionId){
                      this.symbol = this.siteList[index].symbol
                      localStorage.setItem("symbol",this.symbol)
                    }
                  })
                  // 把搜索的参数存一下
                  localStorage.setItem("searchParams1",JSON.stringify(this.searchParams))
                  // 把选中的分类数组存一下
                  localStorage.setItem("cateList1",this.selectedValue)
                }else {
                  // throw new Error('Server returned an unsuccessful response');
                }
              });
            },
            handleError(error) {
                console.error(this.$t('响应search数据失败'), error);
                if (this.reTry > 0) {
                  this.reTry--;
                  setTimeout(() => {
                    this.searchProducts(); // 重试获取商品详情
                  }, 3000); // 等待3秒后重试
                } else {
                  ElMessage({
                    message: this.$t('响应search数据失败'),
                    grouping: true,
                    type: 'error'
                  });
                  this.isSuccess = true;
                }
              },
            clearForm(){
                Object.assign(this.formData, cloneDeep(this.templateFormData));
                this.onSaleTimeRange1 = []
                // this.handleClearSelect()
            },
            // getGoodsDetail(){
            //     getDetails(this.params).then((res)=>{
            //         if(res.code == 200 && res.status == 1){
            //             this.reTry = 3
            //             this.goods = res.data.lists.goods
            //             this.history = res.data.lists.history
            //             this.history.forEach(item=>{
            //             let str =item.createTime.slice(5,10)
            //                 this.dataX = this.dataX.concat(str)
            //                 this.dataY1 = this.dataY1.concat(item.sold)
            //             })
            //             this.isGetData = true
            //             this.drewLine(this.activeName,this.$t('总销量'),this.dataY1)//宏任务
            //             this.drowLine3()
            //         }
            //     }).catch((error)=>{
            //         console.log(this.$t('响应detail数据失败'), error);
            //         setTimeout(()=>{
            //             if(this.reTry > 0){
            //                 this.reTry--;
            //                 this.getGoodsDetail();
            //             }else if(this.reTry == 0){
            //                 this.isSuccess = true
            //                     ElMessage({
            //                     message:this.$t('响应detail数据失败'),
            //                     grouping:true,
            //                     type:'error'
            //                 })
            //             }
            //         },1000)
            //     })
            // },
            drawLineChart(){
              const that =this;
              this.tableData.forEach(item=>{
                console.log(document.getElementById('echarts_' + item.goodsId));
                if(document.getElementById('echarts_' + item.goodsId) ===null){
                  return;
                }
                that.myChart = echarts.init(document.getElementById('echarts_' + item.goodsId));
                that.myChart.setOption({
                  xAxis: {
                    show: false, //取消显示坐标轴,坐标轴刻度,坐标值(如果是y轴,默认的网格线也会取消显示)
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                      show:false
                    },
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                    type: 'value',
                    axisLabel: { // 取消显示坐标值
                      show: false
                    },
                    splitLine: { //取消网格线
                      show:false
                    },
                  },
                  series: [
                    {
                      data: [820, 932, 901, 934, 1290, 1330, 1320],
                      type: 'line',
                      symbol: "none",
                      smooth: true,
                      areaStyle: {}
                    }
                  ],
                  grid: {
                    left: "0",
                    top: "0",
                    right: "0",
                    bottom: "0",
                    containLabel: true,
                  },
                });
              })

            },
            parseDateTime(dateTimeStr) {
                // const date = new Date(dateTimeStr);
                if(dateTimeStr == null || dateTimeStr == '')
                {
                    return ;
                }
                const date = dateTimeStr.slice(0,10)
                return date
                // const now = new Date();
                // const diff = now - date;   
                // const seconds = Math.floor(diff / 1000);
                // const minutes = Math.floor(seconds / 60);
                // const hours = Math.floor(minutes / 60); 
                // const days = Math.floor(hours / 24);
                // const months = Math.floor(days / 30);
                // const years = Math.floor(days / 365);
                // if (years > 0) {
                //     return `${years}年前`;
                // } else if (months > 0) {
                //     return `${months}月前`;
                // } else if (days > 0) {
                //     return `${days}天前`;
                // }
            },
            handleDateRangeChange(value){
                // value 是一个数组，包含两个 Date 对象：[start, end]
                if (Array.isArray(value) && value.length === 2) {
                    this.formData.shelf_time_min = value[0]; // 开始日期
                    this.formData.shelf_time_max = value[1]; // 结束日期
                }
                console.log(this.formData.onSaleTimeMin)
            },
            handleDateRangeChange2(value){
                // value 是一个数组，包含两个 Date 对象：[start, end]
                if (Array.isArray(value) && value.length === 2) {
                    this.formData.mallOpenTimeMin = value[0]; // 开始日期
                    this.formData.mallOpenTimeMax = value[1]; // 结束日期
                }
            },
            isOpen(){
                if(this.isOpening == false){
                    this.isOpening = true
                }else{
                    this.isOpening = false
                }
            },
            handleSizeChange(number){
                this.formData.size = number
                this.isSuccess = false
                this.searchProducts()
            },
            handleCurrentChange(number){
                this.formData.page = number
                this.isSuccess = false
                this.searchProducts()
            },
            // handleSortChange({ column, prop, order }){
            //   console.log(111111111,column)
            //   // console.log(222222222,prop)
            //   // console.log(333333333,order)
            //   if (!prop) {
            //     // 如果 prop 为空，可以选择忽略排序或给出提示
            //     console.warn('prop,error');
            //     return;
            //   }
            //   this.sort = prop;
            //   this.order = order
            // },
            handleSortChange({ column, prop, order }){
                console.log(111111111,column)
                if (!prop) {
                    // 如果 prop 为空，可以选择忽略排序或给出提示
                    console.warn('prop,error');
                    return;
                }
                // 切换排序方向
                if (this.sort === prop) {
                  this.order = this.order === 'ascending' ? 'descending' : 'ascending';
                  order = this.order
                } else {
                  this.sort = prop;
                  if(order === 'descending'){
                    this.order = 'descending'
                  }else{
                    this.order = 'ascending'; // 默认升序
                  }

                }
                this.isSuccess = false;

                // 手动设置排序图标
                const columns = this.$refs.table.columns;
                columns.forEach(col => {
                  if(col.children && col.children.length > 0){
                    col.children.forEach(item => {
                      if (item.property === prop) {
                        item.order = order; // 更新排序图标
                      } else {
                        item.order = null; // 清除其他列的排序图标
                      }
                    })
                  }
                  if (col.property === prop) {
                    col.order = order; // 更新排序图标
                  } else {
                    col.order = null; // 清除其他列的排序图标
                  }
                });
                this.searchProducts()
            },
            getHeaderCellClassName({ column, columnIndex }) {
                console.log(columnIndex)
                if (this.sort == column.property) {
                    return 'sorted-header';
                }
                return '';
            },
            handleClearSelect(){
                this.selectedValues = []
                // 清除选择的逻辑
                this.selectedValue = [];
                this.formData.cat_id = '0'
            },
            shiftDetailTemu(goodsId,country,platform){
              // 跳shenin详情页
              if(platform === 'shein'){
                // 跳转新标签页
                const routeData = this.$router.resolve({
                  name: 'detail2',
                  query:{
                    id:goodsId,
                    country:this.countryCodes[country],
                    returnUrl: window.location.href // 记录当前页面的 URL
                  }
                });
                window.open(routeData.href, '_blank');
              }else{     // 跳temu详情页
                // 跳转新标签页
                const routeData = this.$router.resolve({
                  name: 'detail3',
                  query:{
                    goodsId:goodsId,
                    regionId:country,
                    returnUrl: window.location.href // 记录当前页面的 URL
                  }
                });
                window.open(routeData.href, '_blank');
              }
              const pagePath = window.location.href; // 当前页面 URL
              const buttonName = 'detail' // 按钮名称
              buttonClick(pagePath, buttonName);
            },
            // 设置不可选的时间
            disabledDate(time){
                if (!(time instanceof Date)) {
                    time = new Date(time);
                }
                return time.getTime() > Date.now();
            },
            updateDisabledDateRange(){
                this.$forceUpdate(); // 强制更新组件，确保 disabledDate 重新计算
            },
            handleFocus(){
                this.disabledDate()
            },
            handleVisibleChange(visible){
                if (visible) {
                    this.updateDisabledDateRange();
                } else {
                    console.log('unvisible');
                }
            },
            // 跳转到订阅页面
            shiftReserve(){
              this.$router.push('/subscribe/price')
            },
            // 跳转到注册页面
            shiftRegister(){
              this.$router.push('/register')
            },
            btnSearchProducts(){
              this.formData.page=1
              this.searchProducts()
              const pagePath = window.location.href; // 当前页面 URL
              const buttonName = 'search' // 按钮名称
              buttonClick(pagePath, buttonName);
            },
    }
}
</script>

<style lang="scss" scoped>
.rank2-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 70rem;
    // max-width: 85rem; /* 设置最大宽度 */
    min-height: 44.38rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    .rank2-card-title{
        width: 19.38rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 1.25rem;
        font-weight: 600;
        text-align: left;
        font-family: AlibabaPuHui-medium;
    }
}
/* el-divider 修改高度效果 */
.el-divider--horizontal{
     margin: 1rem 0;
    //  background: 0 0;
     border-top: 0.1rem solid #f2f3f5;
 }
 .product-tag{
    padding: 0.2rem 0.4rem;
    height: 1.6rem;
    background-color: rgb(232,245,255);
    min-width: 2.5rem;
    max-width: 10rem;
    border-radius: 0.15rem;
    color: rgb(0, 82, 217);
 }
 .goodsName{
    padding: 0 0.3rem;
    cursor: pointer;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   height: 46px;
   margin:  auto 0;
   color: #165DFF;
 }
 .mask-layer{
   width: 100%;
   min-width: 70rem;
   height: 240px;
   position: absolute;
   top: 560px;
   /*background-color: rgba(222, 222,222, 0.5);  半透明背景 */
   font-size: 16px;
   color: #111;
   /*pointer-events: none;  确保点击事件穿透到表格 */
 }
 /*input框 */
 :deep(.custom-input1 .el-input__wrapper) {
    border-radius: 0.3rem 0 0 0.3rem;
}
:deep(.custom-input2 .el-input__wrapper) {
    border-radius: 0 0.3rem 0.3rem 0;
}
:deep(.item-padding-style .el-form-item__label){
    padding-right: 5px;
}
.can-not-show{
    margin-top: 3rem;
    width: 36.25rem;
    height: 3.13rem;
    line-height: 3.13rem;
    color: rgba(16, 16, 16, 1);
    font-size: 1rem;
    text-align: center;
    font-family: AlibabaPuHui-regular;
}
.can-not-show2{
  margin-top: 3rem;
  width: 36.25rem;
  height: 3.13rem;
  line-height: 3.13rem;
  font-size: 1rem;
  text-align: center;
}
::v-deep .el-table th.sorted-header  {
    color: #3a8ddb !important;
}

.responsive-form {
  width: 100%;
  max-width: 100%;
}
.el-row {
  margin-bottom: 1rem;
}
.el-col {
  display: flex;
  align-items: center;
}
.el-form-item {
  margin-bottom: 0; /* 移除默认的底部间距 */
}
.el-form-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.responsive-form .el-form-item {
  flex: 1 1 calc(50% - 1rem); /* 每个 form-item 占据 50% 的宽度，减去 gap */
  min-width: 15rem; /* 最小宽度 */
}
.responsive-form .el-form-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-input, .form-select, .form-cascader {
  width: 100%;
}

.pagination-container {

  display: flex;
  justify-content: center; /* 居中对齐 */
  //margin: 1rem auto; /* 上下外边距1rem，左右自动居中 */
  //width: fit-content; /* 根据内容自动调整宽度 */
  min-width: 20rem; /* 设置最小宽度 */
  max-width: 100%; /* 确保最大宽度不超过容器 */
}
/* 如果需要更精确地控制分页组件内部元素的布局，可以添加以下样式 */
.el-pagination {
  margin: 1rem 2rem 1rem 50%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
</style>